<template>
	<view class="cardstyle">
		<!-- 1. 置顶纯文字新闻 -->
		<view class="top-text-card" v-if="isTop && images.length === 0">
			<text class="top-title">{{ title }}</text>
			<view class="top-tip-area">
				<text class="top-tag">置顶</text>
				<text class="author-tip">{{ author }} {{ comments }}评</text>
			</view>
		</view>
		<!-- 2. 单图新闻 -->
		<view class="img-text-card" v-else-if="images[0] && !isAd">
			<view class="img-area">
				<image :src="showImage" mode="aspectFill" class="news-img" @error="handleImageError"></image>
				<text class="img-bottom-tip">{{ author }} {{ comments }}评</text>
			</view>
			<view class="text-area">
				<text class="titlebox">{{ title }}</text>
			</view>
		</view>
		<!-- 3. 多图广告-->
		<view class="ad-container" v-else-if="isAd">
			<text class="ad-title-above">{{ title }}</text>
			<view class="ad-img-row">
				<image :src="processedAdImgs[0]" mode="aspectFill" class="ad-img-item"
					@error="(e)=>handleAdImgError(e, 1)"></image>
				<image :src="processedAdImgs[1]" mode="aspectFill" class="ad-img-item"
					@error="(e)=>handleAdImgError(e, 2)"></image>
				<image :src="processedAdImgs[2]" mode="aspectFill" class="ad-img-item"
					@error="(e)=>handleAdImgError(e, 3)"></image>
			</view>
			<view class="ad-tag-row">
				<text class="ad-tag">广告</text>
				<text class="ad-author">{{ author }}</text>
			</view>
		</view>
		<!-- 4. 纯文字新闻（非置顶） -->
		<view class="text-only-card" v-else>
			<text class="titlebox">{{ title }}</text>
			<view class="tip-area">
				<text class="author-tip">{{ author }} {{ comments }}评</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "NewsView",
		props: {
			title: {
				type: String,
				default: "默认标题",
				required: true
			},
			isTop: {
				type: Boolean,
				default: false
			},
			author: {
				type: String,
				default: "来源",
				required: true
			},
			comments: {
				type: Number,
				default: 0
			},
			images: {
				type: Array,
				default: () => []
			},
			isAd: {
				type: Boolean,
				default: false
			},
			imgUrl1: {
				type: String,
				default: ""
			},
			imgUrl2: {
				type: String,
				default: ""
			},
			imgUrl3: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				defaultPic: "/static/新闻/default.png",
				imageError: false,
				adImgErrors: []
			};
		},
		computed: {
			showImage() {
				const hasValidImage = this.images.length > 0 && this.images[0];
				return this.imageError ? this.defaultPic : (hasValidImage ? this.images[0] : this.defaultPic);
			},
			processedAdImgs() {
				const adImgs = [this.imgUrl1, this.imgUrl2, this.imgUrl3];
				return adImgs.map((img, index) => {
					return this.adImgErrors.includes(index) ? this.defaultPic : (img || this.defaultPic);
				});
			}
		},
		methods: {
			handleImageError(event) {
				this.imageError = true;
				event.target.onerror = null;
			},
			handleAdImgError(e, index) {
				const imgIndex = index - 1;
				if (!this.adImgErrors.includes(imgIndex)) {
					this.adImgErrors.push(imgIndex);
				}
				e.target.src = this.defaultPic;
				e.target.onerror = null;
			}
		}
	};
</script>

<style scoped>
	.cardstyle {
		padding: 15rpx 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
		background-color: #fff;
	}

	.extra-text {
		font-size: 26rpx;
		color: #666;
		line-height: 36rpx;
		display: block;
		margin: 6rpx 0;
		white-space: normal;
		word-break: break-all;
	}

	.top-text-card {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.top-title {
		font-size: 32rpx;
		color: #333;
		line-height: 44rpx;
	}

	.top-tip-area {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.top-tag {
		background-color: #ff4d4f;
		color: #fff;
		font-size: 22rpx;
		padding: 2rpx 8rpx;
		border-radius: 4rpx;
	}

	.img-text-card {
		display: flex;
		gap: 15rpx;
		align-items: flex-start;
	}

	.img-area {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.news-img {
		width: 200rpx;
		height: 140rpx;
		border-radius: 8rpx;
	}

	.img-bottom-tip {
		font-size: 24rpx;
		color: #999;
		text-align: center;
		line-height: 28rpx;
	}

	.text-area {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.titlebox {
		font-size: 30rpx;
		color: #333;
		line-height: 40rpx;
	}

	.author-tip {
		font-size: 24rpx;
		color: #999;
	}

	/* 多图广告样式*/
	.ad-container {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.ad-title-above {
		font-size: 28rpx;
		color: #333;
		line-height: 36rpx;
	}

	.ad-img-row {
		display: flex;
		gap: 4rpx;
		height: 200rpx;
	}

	.ad-img-item {
		flex: 1;
		width: 100%;
		height: 100%;
		border-radius: 4rpx;
	}

	.ad-tag-row {
		display: flex;
		align-items: center;
		gap: 6rpx;
		margin-top: 2rpx;
		font-size: 22rpx;
		color: #999;
	}

	.ad-tag {
		background-color: #f0f0f0;
		padding: 2rpx 6rpx;
		border-radius: 4rpx;
	}

	.ad-author {
		flex: 1;
	}

	.text-only-card {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.tip-area {
		display: flex;
		gap: 10rpx;
	}
</style>